<template>
    <div class="app-container">
      <Header @select="handleSelect"/>
      <div class="main-container text-sm">
        <router-view :modelValue="modelValue"/>
      </div>
    </div>
</template>

<script setup>
import Header from '@/components/layout/Header.vue';
import { useMenuStore } from '@/stores/menu';
import { ref,computed,watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const menuStore = useMenuStore();
const modelValue = ref('1');

watch(modelValue, (newVal) => {
  router.push({ name: 'home-assessment', params: { tab: newVal } });
});
function handleSelect(item) {
  modelValue.value = item;
}

</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  display: flex;
  padding: 32px 10%;
  background-color: #F5F5F5;
  height: calc(100% - 60px);
  margin-top: 60px;
  .main-containers{
    width: 936px;
    margin-left:24px;
    
  }
}
</style>
  